<template>
  <div class="outer-box">
    <div class="btn-box">
      <button @click="changeTable(1)">上一个</button>
      <button @click="changeTable(-1)">下一个</button>
    </div>
    <div class="big-box">
      <div class="container">
        <div class="first-box">
          <div v-for="(item, index) of data1" :key="index">
            <!-- 等级 -->
            <div
              class="grade-box"
              :style="{
                height: title_height + 'px',
                marginTop: title_marginTop,
                background: rank_backColor[item.titleRank],
              }"
              v-if="item.title"
            >
              {{ item.titleRank }}
            </div>
            <!-- 标题 -->
            <div
              class="data-box"
              :style="{
                height: box_height1,
              }"
              style="background-color: rgb(6, 45, 102)"
              v-if="item.title_name"
            >
              <div>排名</div>
              <div>区县</div>
              <div>得分</div>
              <div>比率</div>
            </div>
            <!-- 内容 -->
            <div
              class="data-box"
              :style="{
                height: box_height1,
                backgroundColor:
                  item.order % 2 === 0
                    ? 'rgb(13, 53, 105)'
                    : 'rgb(20, 59, 114)',
              }"
              v-if="item.title === false"
            >
              <div>{{ item.order }}</div>
              <div>
                {{ item.district_name }}
              </div>
              <div>{{ Math.round(item.target_ratio * 100) / 100 }}</div>
              <div>{{ item.target_score }}</div>
            </div>
          </div>
        </div>
        <div class="second-box">
          <div v-for="(item, index) of data2" :key="index">
            <!-- 等级 -->
            <div
              class="grade-box"
              :style="{
                height: title_height + 'px',
                marginTop: title_marginTop,
                background: rank_backColor[item.titleRank],
              }"
              v-if="item.title"
            >
              {{ item.titleRank }}
            </div>
            <!-- 标题 -->
            <div
              class="data-box"
              :style="{
                height: box_height2,
              }"
              style="background-color: rgb(6, 45, 102)"
              v-if="item.title_name"
            >
              <div>排名</div>
              <div>区县</div>
              <div>得分</div>
              <div>比率</div>
            </div>
            <!-- 内容 -->
            <div
              class="data-box"
              :style="{
                height: box_height2,
                backgroundColor:
                  item.order % 2 === 0
                    ? 'rgb(13, 53, 105)'
                    : 'rgb(20, 59, 114)',
              }"
              v-if="item.title === false"
            >
              <div>{{ item.order }}</div>
              <div>
                {{ item.district_name }}
              </div>
              <div>{{ Math.round(item.target_ratio * 100) / 100 }}</div>
              <div>{{ item.target_score }}</div>
            </div>
          </div>
        </div>
        <div class="third-box">
          <div v-for="(item, index) of data3" :key="index">
            <!-- 等级 -->
            <div
              class="grade-box"
              :style="{
                height: title_height + 'px',
                marginTop: title_marginTop,
                background: rank_backColor[item.titleRank],
              }"
              v-if="item.title"
            >
              {{ item.titleRank }}
            </div>
            <!-- 标题 -->
            <div
              class="data-box"
              :style="{
                height: box_height3,
              }"
              style="background-color: rgb(6, 45, 102)"
              v-if="item.title_name"
            >
              <div>排名</div>
              <div>区县</div>
              <div>得分</div>
              <div>比率</div>
            </div>
            <!-- 内容 -->
            <div
              class="data-box"
              :style="{
                height: box_height3,
                backgroundColor:
                  item.order % 2 === 0
                    ? 'rgb(13, 53, 105)'
                    : 'rgb(20, 59, 114)',
              }"
              v-if="item.title === false"
            >
              <div>{{ item.order }}</div>
              <div>
                {{ item.district_name }}
              </div>
              <div>{{ Math.round(item.target_ratio * 100) / 100 }}</div>
              <div>{{ item.target_score }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";

export default {
  data() {
    return {
      treeData: [],
      box_height: null,
      box_height1: null,
      box_height2: null,
      box_height3: null,
      title_marginTop: null,
      title_height: 30,
      bigBox_height: 832,
      bigBox_width: 972,
      rank_backColor: {
        A: "rgb(30, 164, 101)",
        B: "rgb(57,119,178)",
        C: "rgb(226,196,40)",
        D: "rgb(230,145,23)",
        E: "rgb(117,67,50)",
      },
      data1: [],
      data2: [],
      data3: [],
      tableIndex: "../data/txt/data6.json",
      tableListIndex: 0,
    };
  },
  mounted() {
    this.changeTable(this.tableListIndex);
  },
  computed: {},
  methods: {
    getInitData(path) {
      $.getJSON(path, (data) => {
        // 数据预处理
        let order = 1;
        try {
          // 标准数据格式
          for (let j = 0; j < data.length; j++) {
            this.treeData.push({
              titleRank: data[j].district[0].target_level,
              title: true,
              title_name: false,
            });
            this.treeData.push({
              title_name: true,
            });
            for (let i = 0; i < data[j].district.length; i++) {
              this.treeData.push({
                ...data[j].district[i],
                title: false,
                order: order,
                title_name: false,
              });
              order++;
            }
          }
        } catch {
          // 数据格式不同时
          for (let j = 0; j < data.length; j++) {
            if (j === 0) {
              this.treeData.push({
                titleRank: data[j].level,
                title: true,
              });
              this.treeData.push({
                title_name: true,
              });
              let { count, districname, sort, level } = data[j];
              this.treeData.push({
                district_name: districname,
                target_ratio: count,
                target_score: sort,
                title: false,
                title_name: false,
                order: order,
                level: level,
              });
              order++;
            } else {
              let { count, districname, sort, level } = data[j];
              this.treeData.push({
                district_name: districname,
                target_ratio: count,
                target_score: sort,
                title: false,
                title_name: false,
                order: order,
                level: level,
              });
              order++;
            }
            if (j != data.length - 1) {
              if (data[j].level != data[j + 1].level) {
                this.treeData.push({
                  titleRank: data[j + 1].level,
                  title: true,
                });
                this.treeData.push({
                  title_name: true,
                });
              }
            }
          }
        }

        // 计算 当前 宽 高 间隔
        this.getHeiWidMar(this.treeData.length);
        // 当前一列能放置的行数
        let numArr = this.getNumArr();

        // 判断第二列列初是否能放置标题
        if (
          !this.treeData[numArr + 1].title ||
          !this.treeData[numArr + 1].title_name
        ) {
          this.treeData.splice(numArr + 1, 0, {
            title_name: true,
          });
        }

        // 计算 当前 宽 高 间隔
        this.getHeiWidMar(this.treeData.length);
        // 再次计算行数
        let newNumArr = this.getNumArr();

        // 如果行数不变 则将上一次添加的标题 移动到下一行
        if (newNumArr === numArr + 1) {
          this.treeData.splice(numArr + 1, 1);
          this.treeData.splice(numArr + 2, 0, {
            title_name: true,
          });
        }

        // 判断第三列列初是否能放置标题
        if (
          !this.treeData[2 * numArr + 1].title ||
          !this.treeData[2 * numArr + 1].title_name
        ) {
          this.treeData.splice(2 * numArr + 1, 0, {
            title_name: true,
          });
        }
        this.getHeiWidMar(this.treeData.length);

        // 数据处理 标题若是在title之前 直接删掉
        // 分配数据
        for (let i = 0; i < this.treeData.length; i++) {
          if (this.treeData[i].title_name && this.treeData[i + 1].title) {
            this.treeData.splice(i, 1);
          }
          if (i <= newNumArr) {
            this.data1.push(this.treeData[i]);
          }
          if (i <= newNumArr * 2 && i > newNumArr) {
            this.data2.push(this.treeData[i]);
          }
          if (i > newNumArr * 2) {
            this.data3.push(this.treeData[i]);
          }
        }

        // 计算 当前 宽 高 间隔
        this.getHeiWidMar(this.treeData.length);

        // 计算行数
        numArr = this.getNumArr();

        // 判断一列列末是否还能放置
        this.isMoreitem(this.data1, this.data2, numArr);
        this.isMoreitem(this.data2, this.data3, numArr);

        // 数据是否超出
        this.box_height1 = this.setHeight(this.data1);
        this.box_height2 = this.setHeight(this.data2);
        this.box_height3 = this.setHeight(this.data3);

        // 数据检查
        this.checkData(this.data1);
        this.checkData(this.data2);
        this.checkData(this.data3);

        // 转换 宽 高 间隔 带px单位
        this.parseIntoPx();
      });
    },
    getHeiWidMar(length) {
      // 高度
      this.box_height = (this.bigBox_height * 3) / length;
      // 标题 marginTop
      this.title_marginTop = (this.box_height - this.title_height) / 1.25;
      // 宽度
      this.box_width = this.bigBox_width / 3;
      // 间隔
      this.box_margin = Math.round(this.box_height * 0.15);
    },
    // 获取行数
    getNumArr() {
      // 当前一列能放置的行数
      return Math.floor(this.bigBox_height / this.box_height);
    },
    // 数据是否超出表格
    isMoreitem(data1, data2, numArr) {
      if (this.bigBox_height - data1.length * this.box_height >= 0) {
        if (data1.length != numArr || data2.length > numArr) {
          data1.push(data2[1]);
          data2.splice(1, 1);
        }
      }
    },
    // 如果数据超出 范围 重新设置高度
    setHeight(data) {
      if (data.length * this.box_height > this.bigBox_height) {
        let height = this.bigBox_height / data.length;
        this.title_marginTop = height - this.title_height;
        return height;
      } else if (data.length * this.box_height < this.bigBox_height) {
        let height = this.bigBox_height - this.box_height * data.length;
        height = height / data.length + this.box_height;
        return height;
      } else {
        return this.box_height;
      }
    },
    checkData(data) {
      // 数据头必须是title或者title_name
      if (!data[0].title && !data[0].title_name) {
        data.splice(0, 0, {
          title_name: true,
        });
      }
      // 判断 数据间是否有单独的title_name
      for (let i = 1; i < data.length; i++) {
        if (data[i].title_name) {
          if (!data[i - 1].title) {
            data.splice(i, 1);
          }
        }
      }
    },
    parseIntoPx() {
      this.box_height = this.box_height + "px";
      this.box_margin = "0 " + this.box_margin + "px";
      this.box_width = this.box_width + "px";
      this.title_marginTop = this.title_marginTop + "px";
      this.box_height1 = this.box_height1 + "px";
      this.box_height2 = this.box_height2 + "px";
      this.box_height3 = this.box_height3 + "px";
    },
    changeTable(num) {
      this.treeData = [];
      this.data1 = [];
      this.data2 = [];
      this.data3 = [];
      let tableList = [
        "../data/txt/data1.json",
        "../data/txt/data2.json",
        "../data/txt/data3.json",
        "../data/txt/data4.json",
        "../data/txt/data5.json",
        "../data/txt/data6.json",
      ];
      this.tableListIndex += num;
      if (this.tableListIndex > tableList.length - 1) {
        this.tableListIndex = 0;
      } else if (this.tableListIndex < 0) {
        this.tableListIndex = tableList.length - 1;
      }
      this.tableIndex = tableList[this.tableListIndex];
      this.getInitData(this.tableIndex);
    },
  },
};
</script>

<style lang="scss" scoped>
.big-box {
  transform: translate(-50% -50%);
  width: 972px;
  height: 832px;
  background-color: rgb(6, 45, 102);

  .container {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .first-box,
  .second-box,
  .third-box {
    width: 34%;
    height: 100%;
    background-color: rgb(6, 45, 102);
  }

  .first-box {
    margin-left: 2%;
  }
  .second-box {
    margin: 0 2%;
  }
  .third-box {
    margin-right: 2%;
  }

  .data-box {
    display: flex;
    flex-direction: row;
    color: white;

    div {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    div:nth-child(1) {
      width: 20%;
    }

    div:nth-child(2) {
      width: 40%;
      letter-spacing: 2px;
    }
    div:nth-child(3) {
      width: 20%;
    }
    div:nth-child(4) {
      width: 20%;
    }
  }
}

.grade-box {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: rgb(30, 164, 101);
  font-size: 24px;
}

.btn-box {
  button {
    width: 80px;
    height: 30px;
  }
}

.outer-box {
  position: absolute;
  top: 50px;
  left: 600px;
}
</style>